<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据看板 - 消防工程集团经营管理系统</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">  
    <style>
        body {
            background: #f3f4f6;
        }
    </style>
</head>
<body>
    <!-- Sidebar -->
    <div class="fixed left-0 top-0 bottom-0 w-64 bg-gray-900 text-white shadow-lg">
        <div class="p-6 border-b border-gray-800">
            <div class="flex items-center">
                <i class="fas fa-fire-extinguisher text-2xl text-blue-400 mr-3"></i>
                <div>
                    <div class="font-bold text-lg">消防工程集团</div>
                    <div class="text-xs text-gray-400">管理系统</div>
                </div>
            </div>
        </div>
        <nav class="p-4 space-y-2">
            <a href="dashboard.html" class="flex items-center px-4 py-3 bg-blue-600 rounded-lg text-white">
                <i class="fas fa-chart-line w-5 mr-3"></i>
                <span>数据看板</span>
            </a>
            <a href="project-list.html" class="flex items-center px-4 py-3 text-gray-300 hover:bg-gray-800 rounded-lg">
                <i class="fas fa-building w-5 mr-3"></i>
                <span>项目管理</span>
            </a>
            <a href="purchase-list.html" class="flex items-center px-4 py-3 text-gray-300 hover:bg-gray-800 rounded-lg">
                <i class="fas fa-shopping-cart w-5 mr-3"></i>
                <span>采购管理</span>
            </a>
            <a href="payment-list.html" class="flex items-center px-4 py-3 text-gray-300 hover:bg-gray-800 rounded-lg">
                <i class="fas fa-money-bill-wave w-5 mr-3"></i>
                <span>付款管理</span>
            </a>
            <a href="inventory.html" class="flex items-center px-4 py-3 text-gray-300 hover:bg-gray-800 rounded-lg">
                <i class="fas fa-warehouse w-5 mr-3"></i>
                <span>库存管理</span>
            </a>
            <a href="hr-dashboard.html" class="flex items-center px-4 py-3 text-gray-300 hover:bg-gray-800 rounded-lg">
                <i class="fas fa-users w-5 mr-3"></i>
                <span>人力成本</span>
            </a>
            <a href="system-settings.html" class="flex items-center px-4 py-3 text-gray-300 hover:bg-gray-800 rounded-lg">
                <i class="fas fa-cog w-5 mr-3"></i>
                <span>系统管理</span>
            </a>
        </nav>
    </div>

    <!-- Main Content -->
    <div class="ml-64">
        <!-- Header -->
        <header class="bg-white shadow-sm border-b border-gray-200 px-8 py-4">
            <div class="flex items-center justify-between">
                <h1 class="text-2xl font-bold text-gray-800">数据看板</h1>
                <div class="flex items-center gap-4">
                    <div class="flex items-center gap-2 text-gray-600">
                        <i class="fas fa-calendar-alt"></i>
                        <span>2024年1月15日</span>
                    </div>
                    <div class="flex items-center gap-3">
                        <div class="relative">
                            <i class="fas fa-bell text-gray-600 text-xl"></i>
                            <span class="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center">5</span>
                        </div>
                        <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop" 
                             alt="头像" class="w-10 h-10 rounded-full">
                    </div>
                </div>
            </div>
        </header>

        <!-- Dashboard Content -->
        <main class="p-8">
            <!-- Key Metrics -->
            <div class="grid grid-cols-4 gap-6 mb-8">
                <div class="bg-white rounded-xl shadow-sm p-6 border-l-4 border-blue-500">
                    <div class="flex items-center justify-between">
                        <div>
                            <div class="text-gray-500 text-sm mb-1">项目总数</div>
                            <div class="text-3xl font-bold text-gray-800">28</div>
                            <div class="text-green-600 text-sm mt-2">
                                <i class="fas fa-arrow-up"></i> 较上月 +3
                            </div>
                        </div>
                        <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center">
                            <i class="fas fa-building text-blue-600 text-2xl"></i>
                        </div>
                    </div>
                </div>

                <div class="bg-white rounded-xl shadow-sm p-6 border-l-4 border-green-500">
                    <div class="flex items-center justify-between">
                        <div>
                            <div class="text-gray-500 text-sm mb-1">总合同金额</div>
                            <div class="text-3xl font-bold text-gray-800">¥2.8亿</div>
                            <div class="text-green-600 text-sm mt-2">
                                <i class="fas fa-arrow-up"></i> 较上月 +12%
                            </div>
                        </div>
                        <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center">
                            <i class="fas fa-yen-sign text-green-600 text-2xl"></i>
                        </div>
                    </div>
                </div>

                <div class="bg-white rounded-xl shadow-sm p-6 border-l-4 border-orange-500">
                    <div class="flex items-center justify-between">
                        <div>
                            <div class="text-gray-500 text-sm mb-1">总投入成本</div>
                            <div class="text-3xl font-bold text-gray-800">¥1.5亿</div>
                            <div class="text-orange-600 text-sm mt-2">
                                <i class="fas fa-arrow-up"></i> 较上月 +8%
                            </div>
                        </div>
                        <div class="w-16 h-16 bg-orange-100 rounded-full flex items-center justify-center">
                            <i class="fas fa-chart-line text-orange-600 text-2xl"></i>
                        </div>
                    </div>
                </div>

                <div class="bg-white rounded-xl shadow-sm p-6 border-l-4 border-purple-500">
                    <div class="flex items-center justify-between">
                        <div>
                            <div class="text-gray-500 text-sm mb-1">待审批流程</div>
                            <div class="text-3xl font-bold text-gray-800">15</div>
                            <div class="text-red-600 text-sm mt-2">
                                <i class="fas fa-exclamation-circle"></i> 需处理
                            </div>
                        </div>
                        <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center">
                            <i class="fas fa-clipboard-check text-purple-600 text-2xl"></i>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Charts Row -->
            <div class="grid grid-cols-2 gap-6 mb-8">
                <!-- Cost Trend -->
                <div class="bg-white rounded-xl shadow-sm p-6">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="text-lg font-semibold text-gray-800">成本趋势分析</h3>
                        <select class="text-sm border border-gray-300 rounded-lg px-3 py-1">
                            <option>近6个月</option>
                            <option>近12个月</option>
                        </select>
                    </div>
                    <canvas id="costTrendChart" height="250"></canvas>
                </div>

                <!-- Project Distribution -->
                <div class="bg-white rounded-xl shadow-sm p-6">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="text-lg font-semibold text-gray-800">项目状态分布</h3>
                    </div>
                    <canvas id="projectDistChart" height="250"></canvas>
                </div>
            </div>

            <!-- Data Tables Row -->
            <div class="grid grid-cols-2 gap-6">
                <!-- Recent Projects -->
                <div class="bg-white rounded-xl shadow-sm p-6">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="text-lg font-semibold text-gray-800">最近项目</h3>
                        <a href="project-list.html" class="text-blue-600 text-sm">查看全部 <i class="fas fa-chevron-right text-xs"></i></a>
                    </div>
                    <div class="space-y-3">
                        <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                            <div>
                                <div class="font-semibold text-gray-800">消防工程A项目</div>
                                <div class="text-sm text-gray-500">合同金额：¥500万 | 进度：60%</div>
                            </div>
                            <span class="bg-blue-100 text-blue-600 text-xs px-2 py-1 rounded">进行中</span>
                        </div>
                        <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                            <div>
                                <div class="font-semibold text-gray-800">消防工程B项目</div>
                                <div class="text-sm text-gray-500">合同金额：¥800万 | 进度：45%</div>
                            </div>
                            <span class="bg-blue-100 text-blue-600 text-xs px-2 py-1 rounded">进行中</span>
                        </div>
                        <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                            <div>
                                <div class="font-semibold text-gray-800">消防工程C项目</div>
                                <div class="text-sm text-gray-500">合同金额：¥300万 | 进度：80%</div>
                            </div>
                            <span class="bg-green-100 text-green-600 text-xs px-2 py-1 rounded">验收中</span>
                        </div>
                    </div>
                </div>

                <!-- Pending Approvals -->
                <div class="bg-white rounded-xl shadow-sm p-6">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="text-lg font-semibold text-gray-800">待审批事项</h3>
                        <a href="#" class="text-blue-600 text-sm">查看全部 <i class="fas fa-chevron-right text-xs"></i></a>
                    </div>
                    <div class="space-y-3">
                        <div class="flex items-center justify-between p-3 bg-orange-50 rounded-lg border-l-4 border-orange-500">
                            <div class="flex-1">
                                <div class="font-semibold text-gray-800">采购申请</div>
                                <div class="text-sm text-gray-500">消防栓采购 · ¥50,000</div>
                            </div>
                            <span class="bg-orange-500 text-white text-xs px-2 py-1 rounded">紧急</span>
                        </div>
                        <div class="flex items-center justify-between p-3 bg-blue-50 rounded-lg border-l-4 border-blue-500">
                            <div class="flex-1">
                                <div class="font-semibold text-gray-800">付款申请</div>
                                <div class="text-sm text-gray-500">供应商付款 · ¥30,000</div>
                            </div>
                            <span class="bg-blue-500 text-white text-xs px-2 py-1 rounded">普通</span>
                        </div>
                        <div class="flex items-center justify-between p-3 bg-green-50 rounded-lg border-l-4 border-green-500">
                            <div class="flex-1">
                                <div class="font-semibold text-gray-800">材料申领</div>
                                <div class="text-sm text-gray-500">消防管道 · 100米</div>
                            </div>
                            <span class="bg-green-500 text-white text-xs px-2 py-1 rounded">普通</span>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>

    <script>
        // Cost Trend Chart
        const costCtx = document.getElementById('costTrendChart').getContext('2d');
        new Chart(costCtx, {
            type: 'line',
            data: {
                labels: ['8月', '9月', '10月', '11月', '12月', '1月'],
                datasets: [{
                    label: '人力成本',
                    data: [1200, 1350, 1400, 1450, 1500, 1600],
                    borderColor: '#3b82f6',
                    backgroundColor: 'rgba(59, 130, 246, 0.1)',
                    tension: 0.4
                }, {
                    label: '材料成本',
                    data: [800, 900, 950, 1000, 1100, 1200],
                    borderColor: '#10b981',
                    backgroundColor: 'rgba(16, 185, 129, 0.1)',
                    tension: 0.4
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'bottom'
                    }
                }
            }
        });

        // Project Distribution Chart
        const distCtx = document.getElementById('projectDistChart').getContext('2d');
        new Chart(distCtx, {
            type: 'doughnut',
            data: {
                labels: ['进行中', '验收中', '已归档', '筹备中'],
                datasets: [{
                    data: [15, 5, 6, 2],
                    backgroundColor: ['#3b82f6', '#10b981', '#6b7280', '#f59e0b']
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'bottom'
                    }
                }
            }
        });
    </script>
</body>
</html>

